<template>
    <div>
        <div v-for="a in data">
            <!--标题-->
            <div class="listTitle">
                <a href="javaScript:void(0)" @click="showDetails(a.articleId)">{{ a.articleTitle }}</a>
            </div>
            <!--摘要-->
            <div class="listAbstract">
                {{ textIntercept(a.articleAbstract) }}
            </div>
            <div class="listInfo">
                posted @ {{ fmt(a.articleDate) }} {{ a.usersName }} 阅读({{ fmtNum(a.infoHits) }})
            </div>

            <a-divider dashed />
        </div>
    </div>
</template>

<script>
    export default {
        name: "ArtilceList",
        props: {
            data:{
                default: []
            }
        },
        methods:{
            textIntercept(src) {
                return src.substring(0, 200) + '......';
            },
            showDetails(id) {
                this.$router.push({
                    path: '/details',
                    query: { id }
                })
            },
            fmt(d) {
                return this.$moment(d).format('YYYY-MM-DD');
            },
            fmtNum(num) {
                return num == null ? 0 : num;
            }
        }
    }
</script>

<style scoped>
    .listTitle {
        font-size: var(--h3);
        font-weight: bold;
        padding-bottom: 10px;
    }
    .listAbstract {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .listOrigin span{
        font-size: var(--h6);
        border: 1px solid var(--my-cyan);
        border-radius: 4px;
        padding: 3px 5px;
    }
    .listInfo {
        text-align: right;
        font-size: var(--h5);
        padding-top: 15px;
    }

</style>
